<template>
  <div class="order">
     <div class="search">
<span>搜索</span>
      <el-input style="width: 200px;" size="small" v-model="guestName" />
         <el-select v-model="value" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>
      <el-button style="margin-left: 10px;" type="success" size="small" @click="loadList">查询</el-button>
          <el-button type="primary" size="small" @click="editRef.drawer=true">添加</el-button>
    </div>
    <el-table size="small" :data="list" style="width: 98%">
      <el-table-column prop="id" label="订单编号list" width="100" />
      <el-table-column prop="fullName" label="客户名" width="200" />
      <el-table-column prop="hotelName" label="酒店名" width="100" />
      <el-table-column prop="typeName" label="房型" width="100" />
      <el-table-column prop="roomNumber" label="房间号" width="100" />
      <el-table-column prop="paymentAmount" label="价格" width="100" />
      <el-table-column prop="orderStatus" label="支付状态" width="100" />
      <el-table-column prop="paymentDate" label="下单时间" width="100" />
      <el-table-column label="操作">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import {$list}from '../../api/order.js'
import {ref,reactive,watch,shallowRef,onMounted} from 'vue'
// 房间列表
let list = ref([])
// 加载房型列表
const loadList = async ()=>{
  console.log(111)
  let ret = await $list()
  console.log(ret.data.order.records)
  list.value = ret.data.order.records
  console.log(list)
}
// let showList = computed(()=>{
//   return list.value.slice((pageIndex.value-1)*10,pageIndex.value*10)
// })

//选择查询类型

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: '账号',
  },
  {
    value: 'Option2',
    label: '姓名',
  },
  {
    value: 'Option3',
    label: '手机',
  },
  {
    value: 'Option4',
    label: '邮箱',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

onMounted(()=>{
  loadList()
})

</script>

<style lang="scss" scoped>

</style>